<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-button type="primary" @click="createTaskVisible=true">创建任务</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--列表-->
    <el-table :data="lists" highlight-current-row v-loading="listLoading" style="width: 100%;" class="main_table">
      <el-table-column label="任务编号">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="任务类型" >
        <template slot-scope="scope">
          {{['-','用户数据','用户地址','用户日常','购地订单','购买记录'][scope.row.type]}}
        </template>
      </el-table-column>
     <el-table-column label="任务状态" >
        <template slot-scope="scope">
          <font :color="{'-1': 'red', '0': '#F7BA2A', '1': '#F7BA2A', '2': '#13CE66', '3': '#D3DCE6'}[scope.row.status]">
            {{ {'-1': '处理失败', '0': '等待程序唤起', '1': '处理中', '2': '处理完毕', '3': '无可导出数据'}[scope.row.status] }}
          </font>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" >
        <template slot-scope="scope">
          {{scope.row.create_time}}
        </template>
      </el-table-column>
      <el-table-column label="操作" style="text-align:right;">
        <template slot-scope="scope">
          <a :href="down_href(scope.row.id)" target="_blank" v-if="scope.row.status==2">下载</a>
        </template>
      </el-table-column>
    </el-table>


    <!--创建任务-->
    <el-dialog title="创建任务" v-model="createTaskVisible" :close-on-click-modal="false">
      <el-form :model="createTask" label-width="80px" :rules="createTaskRules" ref="createTask">
        <el-form-item label="活动区域" prop="type">
          <el-select v-model="createTask.type" placeholder="数据源" >
            <el-option label="用户数据" value="1"></el-option>
            <el-option label="用户地址" value="2"></el-option>
            <el-option label="用户日常" value="3"></el-option>
            <el-option label="购地订单" value="4"></el-option>
            <el-option label="购买记录" value="5"></el-option>
            <el-option label="删除记录" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数"  prop="date">
          <el-date-picker v-model="createTask.date" type="daterange" placeholder="选择日期范围"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="createTaskVisible = false">取消</el-button>
        <el-button type="primary" @click.native="create" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
  import NProgress from 'nprogress'
  import { apiTree } from '../apiTree'

  export default {
    data() {
      return {
        filters: {},
        lists: [],
        total: 0,
        page: 1,
        listLoading: false,
        sels: [], // 列表选中列
        createTask: {
          type: '',
          date: []
        },
        addLoading: false,
        createTaskVisible: false,
        createTaskRules: {
          type: [
            {required: true, message: '类型必选', trigger: 'blur'},
            {min: 1, max: 5, message: '类型非法', trigger: 'blur'}
          ],
          date: [
            {type: 'array',required: true, message: '请输入正确的时间区间', trigger: 'change'}
          ]
        }
      }
    },
    methods: {
      views: function () {
        this.listLoading = true
        NProgress.start()
        apiTree('download/index', 'download/index', {}).then((res) => {
            this.lists = res.d.data
            this.listLoading = false
            NProgress.done()
        })
      },
      down_href: function (_id) {
        return 'index.php?c=download&a=download&id=' + _id;
      },
      create: function () {
        this.$refs['createTask'].validate((valid) => {
          if (valid) {
            this.addLoading = true;
            apiTree('download/index', 'download/create', {
              'start': Math.ceil(new Date(this.createTask.date[0]).getTime() / 1000),
              'end': Math.ceil(new Date(this.createTask.date[1]).getTime() / 1000),
              'type': this.createTask.type
            }).then((res) => {
              if (res.s === 1) {
                this.$message({
                  message: '命令执行完毕',
                  type: 'success'
                })
                this.views()
              } else {
                this.$alert('出问题了')
              }
            });
            this.createTaskVisible = false
            this.addLoading = false
          }
        })
      }
    },
    mounted() {
      this.views()
    }
  }

</script>
